<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <form role="form" method="POST" name="statisticprovince">                           
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-lg-2">
                                        Từ ngày:
                                    </div>
                                    <div class="col-lg-3">
                                        <input class="form-control" type="datetime" name="from_date" id="from_date" value="<?php echo $this->fromdate; ?>">        
                                    </div>
                                    <div class="col-lg-2">
                                        Đến:
                                    </div>
                                    <div class="col-lg-3">
                                        <input class="form-control" type="datetime" name="to_date" id="to_date" value="<?php echo $this->todate; ?>">        
                                    </div>
                                     <div class="col-lg-2">

                                </div>
                        </div>
                            </div>
                         <div class="form-group">
                                <div class="row">
                                <div class="col-lg-2">
                                    Tỉnh
                                </div>
                                <div class="col-lg-3">
                                        <?php echo $this->provinceHTML ?>  
                                </div>
                                <div class="col-lg-2">

                                </div>
                                <div class="col-lg-3">
                                    <select id="showchart" name="showchart" class="form-control"> 
                                         <option value="1" <?php if($this->showchart == 1) echo 'selected=selected'; ?> >Cột</option>
                                         <option value="2" <?php if($this->showchart == 2) echo 'selected=selected'; ?>>Phần trăm</option>
                                         <option value="3" <?php if($this->showchart == 3) echo 'selected=selected'; ?>>Bảng</option>
                                     </select> 
                                </div>
                                <div class="col-lg-2">
                                   <button class="btn btn-primary" type="submit" id="submit">Thống kê</button>  
                                </div>
                            </div>
                         </div>
                            <div class="form-group">
                                <div class="row">
                                <div class="col-lg-2">
                                    Đại lý
                                </div>
                                <div class="col-lg-3" id="agent">
                                    <?php echo $this->agentHTML ?>      
                                </div>
                                <div class="col-lg-2">
                                    Sản phẩm
                                </div>
                                <div class="col-lg-3">
                                    <?php echo $this->productHTML ?> 
                                </div>
                                <div class="col-lg-2">
                                    
                                </div>
                            </div>
                         </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
    $('input[type=datetime]').datepicker({showAnim: 'drop', dateFormat: 'dd-mm-yy', showWeek: false, showButtonPanel: false});
    })
</script>
<div class="row">  
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                   <?php if($this->showchart == 2){?>
                    <div class="col-lg-6">                        
                        <div id="container">
                        </div> 
                    </div>
                    <div class="col-lg-6">            
                        <div id="container1">
                        </div>
                    </div>
                    <?php } else {?>
                    <div class="col-lg-12">  
                            <?php if ($this->showchart == 3) { ?>
                                <div class="row">
                                    <h4>Thông kê sản phẩm Đại lý bán</h4>
                                </div>
                            
                            <div class="row">
                                <div id="container">
                                </div> 
                            </div>
                            <?php } ?>
                            <?php if ($this->showchart == 1) {
                                        $arr_agent = explode(",", $this->agent_id);  
                                        $count = count($arr_agent);
                                        $_sttDiv = $count/10+1;
                                        for($i=1;$i<=$_sttDiv;$i++)
                                        {
                            ?>
                            <div class="row">
                                <div id="container<?php echo $i; ?>">
                                </div> 
                            </div>                            
                                        <?php } } ?>
                        </div>  
                    <?php }?>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
     
     $('#agent_id').multiselect({
            includeSelectAllOption:true,
            enableFiltering: true,
            maxHeight: '300',
            buttonText: function(options) 
            {
                var retStr = "";
                if (options.length === 0) {
                   retStr = "None selected";
                } else if(options.length <=3){
                   var textArray = [];
                   $.each(options,function(key,value){
                       textArray.push($.trim($(value).html()));
                   });
                   retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
                } else {
                   retStr = options.length+" selected";
                }
                return retStr+" <b class='caret'></b>";
            }
        });
     
     $('#product_id').multiselect({
         includeSelectAllOption:true,
            enableFiltering: true,
            maxHeight: '300'
        });
     $('#province_id').multiselect({
            enableFiltering: true,
            maxHeight: '300',
            onChange: function(option, checked) {
                 $.post("<?php echo $this->baseUrl() ?>/admin/service/index/", 
            {
                action: 'getagentofprovince',
                province_id: $('#province_id').val()
            },function (datas) {
                var items = eval(datas);
                //alert(items);exit();
                var jItem = items[0];
                         $('#agent').html(jItem.html);
                         $('#agent_id').multiselect({
                            includeSelectAllOption:true,
                            enableFiltering: true,
                            maxHeight: '300',
                            buttonText: function(options) 
                            {
                                var retStr = "";
                                if (options.length === 0) {
                                   retStr = "None selected";
                                } else if(options.length <=3){
                                   var textArray = [];
                                   $.each(options,function(key,value){
                                       textArray.push($.trim($(value).html()));
                                   });
                                   retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
                                } else {
                                   retStr = options.length+" selected";
                                }
                                return retStr+" <b class='caret'></b>";
                            }
                         });
                    });
                    
                if (checked) {
                    orderCount++;
                    $(option).data('order', orderCount);
                    
                }
                else {
                    $(option).data('order', '');
                }
            },
        });
</script>
<script type="text/javascript">
$(document).ready(function () {
     var showchart = <?php echo $this->showchart; ?>;
     if(showchart == 2)
        {
        var colors = Highcharts.getOptions().colors,        
        data = [],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness; 
        // init
    //var browserData=[];
    
     $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticagentpercentbuy/", 
            {
                fromdate: "<?php echo $this->fromdate; ?>",
                todate: "<?php echo $this->todate; ?>",               
                agent_id: "<?php echo $this->agent_id; ?>",
                product_id: "<?php echo $this->product_id; ?>"
            },function (items) {                
                data = items;                
                for (i = 0; i < data.length; i += 1) {
                    // add browser data
                    browserData.push({
                        name: data[i].name,
                        y: data[i].y,
                        color: colors[data[i].color]
                    });

                    // add version data
                    drillDataLen = data[i].drilldown.data.length;
                    for (j = 0; j < drillDataLen; j += 1) {
                        brightness = 0.2 - (j / drillDataLen) / 5;
                        versionsData.push({
                            name: data[i].drilldown.categories[j],
                            y: data[i].drilldown.data[j],
                            color: Highcharts.Color(colors[data[i].color]).brighten(brightness).get()
                        });
                    }
                }    

                // Create the chart
                $('#container').highcharts({
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Thống kê sản phẩm Đại lý bán'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false,
                            center: ['50%', '50%']
                        }
                    },
                    tooltip: {
                        valueSuffix: ''
                    },
                    series: [{
                        name: 'Số lượng',
                        data: browserData,
                        size: '60%',
                        dataLabels: {
                            formatter: function () {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: 'white',
                            distance: -30
                        }
                    }, {
                        name: 'Số lượng',
                        data: versionsData,
                        size: '80%',
                        innerSize: '60%',
                        dataLabels: {
                            formatter: function () {
                                // display only if larger than 1
                                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + ''  : null;
                            }
                        }
                    }]
                });
        });
        
     //chart 2
     var data1 = [],
        browserData1 = [],
        versionsData1 = []; 
     $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticagentpercentsale/", 
            {
                fromdate: "<?php echo $this->fromdate; ?>",
                todate: "<?php echo $this->todate; ?>",               
                agent_id: "<?php echo $this->agent_id; ?>",
                product_id: "<?php echo $this->product_id; ?>"
            },function (items) {                
                data1 = items;                
                for (i = 0; i < data1.length; i += 1) {
                    // add browser data
                    browserData1.push({
                        name: data1[i].name,
                        y: data1[i].y,
                        color: colors[data1[i].color]
                    });

                    // add version data
                    drillDataLen = data1[i].drilldown.data.length;
                    for (j = 0; j < drillDataLen; j += 1) {
                        brightness = 0.2 - (j / drillDataLen) / 5;
                        versionsData1.push({
                            name: data1[i].drilldown.categories[j],
                            y: data1[i].drilldown.data[j],
                            color: Highcharts.Color(colors[data1[i].color]).brighten(brightness).get()
                        });
                    }
                }    

                // Create the chart
                $('#container1').highcharts({
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Thống kê sản phẩm Đại lý mua'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false,
                            center: ['50%', '50%']
                        }
                    },
                    tooltip: {
                        valueSuffix: ''
                    },
                    series: [{
                        name: 'Số lượng',
                        data: browserData1,
                        size: '60%',
                        dataLabels: {
                            formatter: function () {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: 'white',
                            distance: -30
                        }
                    }, {
                        name: 'Số lượng',
                        data: versionsData1,
                        size: '80%',
                        innerSize: '60%',
                        dataLabels: {
                            formatter: function () {
                                // display only if larger than 1
                                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + ''  : null;
                            }
                        }
                    }]
                });
        });
    }//end showchart 2
    // dang cot
    if(showchart == 1)
    {
    <?php $arr_agent = explode(",", $this->agent_id);  
          $count = count($arr_agent);  
          $_tmp_agent_id = array();
          $sttContainer=0;
          for($i=0;$i<$count;$i++){
              if($i>0 && ($i%10)==0){ 
                  $sttContainer++;
    ?>
                var categories<?php echo $sttContainer; ?>=[];
                var series<?php echo $sttContainer; ?>=[];

              $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticagentcolumn/", 
                        {
                            fromdate: "<?php echo $this->fromdate; ?>",
                            todate: "<?php echo $this->todate; ?>",
                            agent_id: "<?php echo implode(",", $_tmp_agent_id); ?>",
                            product_id: "<?php echo $this->product_id; ?>"
                        },function (items) {                
                             categories<?php echo $sttContainer; ?> = items[0];
                             series<?php echo $sttContainer; ?>=items[1];



                $('#container<?php echo $sttContainer; ?>').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Thống kê sản phẩm Đại lý bán'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: categories<?php echo $sttContainer; ?>
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Số lượng (tấn)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} tấn</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: series<?php echo $sttContainer; ?>
                });
                });
    <?php
                  
                  unset($_tmp_agent_id);   
                  $_tmp_agent_id = array();
              }
              array_push($_tmp_agent_id, $arr_agent[$i]);
              
              if(($i>0 && ($i%10)!=0 && $i==($count-1)) || $count==1){ 
                  $sttContainer++;
    ?>
                var categories<?php echo $sttContainer; ?>=[];
                var series<?php echo $sttContainer; ?>=[];

              $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticagentcolumn/", 
                        {
                            fromdate: "<?php echo $this->fromdate; ?>",
                            todate: "<?php echo $this->todate; ?>",
                            agent_id: "<?php echo implode(",", $_tmp_agent_id); ?>",
                            product_id: "<?php echo $this->product_id; ?>"
                        },function (items) {                
                             categories<?php echo $sttContainer; ?> = items[0];
                             series<?php echo $sttContainer; ?>=items[1];



                $('#container<?php echo $sttContainer; ?>').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Thống kê sản phẩm Đại lý bán'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: categories<?php echo $sttContainer; ?>
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Số lượng (tấn)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} tấn</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: series<?php echo $sttContainer; ?>
                });
                });
    <?php
              }
          }
    ?>
    
    }//end showchart dang cot
    // dang bang
    if(showchart == 3)
    {
    var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'id',type:'int'},
                    { name: 'agent_name', type: 'string' },
                    { name: 'product_name', type: 'string' },
                    { name: 'soluong', type: 'string' }   
                ],                
                url:'<?php echo $this->baseUrl() ?>/admin/statistic/statisticagentgrid',
                data: {
                    fromdate: "<?php echo $this->fromdate; ?>",
                    todate: "<?php echo $this->todate; ?>" ,
                    agent_id: "<?php echo $this->agent_id; ?>",
                    product_id: "<?php echo $this->product_id; ?>"
                    
                },
               
                sortcolumn: 'order',
                sortdirection: 'asc'
               
            };
         var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            $("#container").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,  
                theme: 'bootstrap',
                pageable: true,
                showfilterrow: true,
                filterable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columnsResize: true,

                rendergridrows: function (params) {
                    return params.data;
                },
                ready: function () {
                    $("#container").jqxGrid('hideColumn', 'id');
                },
                columns: [
                  {text:'id',dataField:'id',cellsalgin:'right',width:0},
                  { text: 'Đại lý', editable: false, dataField: 'agent_name', width: '20%' },
                  { text: 'Loại hàng',editable: false, dataField: 'product_name', width: '60%' },
                  { text: 'Khối lượng', editable: false, dataField: 'soluong', width: '20%' }
                  
                ]
            });
    }//end dang bang
});
</script>

